<template>
  <div class="payinfo">
     <van-steps :active="active">
      <van-step>提交订单</van-step>
      <van-step>支付</van-step>
      <van-step>咨询</van-step>
      <van-step>评价</van-step>
    </van-steps>
    <div class="order">
      <p>订单类型：图文资讯 (￥15)<span>待支付</span></p>
    </div>
    <div>服务医生：</div>
    <div class="info">
      <img src="https://www.pmdaniu.com/storages/114179/f9ae8e19d16d9c2bdccc1bfe998f2c52-1336/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/avatar_u97-0.svg" alt="">
      <div class="name">
        <p>吴摘 <span>主任医师</span></p>
        <p>内科 <span>中日友好医院</span></p>
      </div>
    </div>
     <!-- <van-cell @touchstart.native.stop="show = true">
     使用密码
    </van-cell>
    <van-field
      readonly
      clickable
      :value="value"
      @touchstart.native.stop="show = false"
    />
    <van-number-keyboard
      v-model="value"
      :show="show"
      :maxlength="6"
      @blur="show = false"
    /> -->
    <p class="txt">订单编号：1231561115</p>
    <p class="txt">订单时间：2021年3月16日17:28:20</p>
    <div class="ziliao">
      <div class="title">
        <div>患者资料</div>
      </div>
    </div>
    <div class="dec">
      <p>患者信息: <span> 张欣 女 26岁</span> </p>
      <p>是否就诊: <span> 未到医院就诊</span> </p>
      <p>病情描述: <span> 发烧连续好几天总是35度左右怎么回事?</span></p>
    </div>
    <div class="btn">
      <van-button :style="{background:'black',color:'#fff'}" class="btnTotal">总计：￥15</van-button>
      <van-button type="primary" class="btnPay" @click="pay">去付款</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog, Toast, NumberKeyboard, PasswordInput } from 'vant'
Vue.use(Dialog)
Vue.use(Toast)
Vue.use(NumberKeyboard)
Vue.use(PasswordInput)
export default {
  name: 'Payinfo',
  data () {
    return {
      active: 1,
      show: false,
      value: ''
    }
  },
  methods: {
    pay () {
      Dialog.confirm({
        title: 'Axure云医',
        message: '￥15.00'
      })
        .then(() => {
          Toast('支付成功！')
        })
        .catch(() => {
          Toast('已取消！')
        })
    },
    onInput(value) {
    },
    onDelete() {
      Toast('删除')
    }
  }
}
</script>

<style lang="less" scoped>
  .order{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .order>p{
    line-height: 50px;
    color: #000;
    font-weight: 700;
    margin-left: 10px;
  }
  .order>p>span{
    color: rgb(91,179,99);
    float: right;
    margin-right: 10px;
  }
  .info{
    width: 95%;
    height: 90px;
    margin: auto;
    margin-top: 10px;
    background: rgb(242,242,242);
  }
  .info>img{
    margin-top: 15px;
    margin-left: 20px;
    float: left;
  }
   .info>.name{
     line-height: 30px;
     margin-top: 15px;
     margin-left: 15px;
    float: left;
  }
  .info>.name p{
    color: #000;
  }
  span{
    color:grey;
  }
  .txt{
    margin-left: 10px;
    line-height: 40px;
  }
  .ziliao{
    margin-top: 30px;
  }
  .ziliao>.title{
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    border-top: 5px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .ziliao>.title>div{
    margin-left: 10px;
  }
  .dec>p{
    line-height: 40px;
    margin-left: 10px;
  }
  .dec span{
    margin-left: 30px;
  }
  .btnTotal{
    width: 70%;
    height: 50px;
    display: inline-block;
    font-size: 18px;
    color: #fff !important;
  }
  .btnPay{
    width: 30%;
    display: inline-block;
    height: 50px;
    font-size: 18px;
    color: #fff !important;
  }
  .btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #fff !important;
  }
</style>
